<template>
    <div>
      <!-- 查询条件 -->
      <div class="search-bar">
        <el-input v-model="data.pnumber" placeholder="请输入项目编号查询" :prefix-icon="searchIcon" class="search-input" />
        <el-input v-model="data.pid" placeholder="请输入项目ID查询" :prefix-icon="searchIcon" class="search-input" />
        <el-date-picker
            v-model="data.rdate"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
        <el-button type="primary" round @click="load">
          <i class="el-icon-search"></i> 查询
        </el-button>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button v-if="user.role === 'STUDENT' || 'TEACHER'" type="primary" round @click="handeladd">
          <i class="el-icon-plus"></i> 新增
        </el-button>
      </div>

      <!-- 数据表格 -->
      <div class="data-table">
        <el-table :data="data.tableData" style="width: 100%">
          <el-table-column prop="id" label="ID" width="70" />
          <el-table-column prop="pnumber" label="项目编号" />
          <el-table-column prop="pid" label="项目ID" />
          <el-table-column prop="amount" label="金额" />
          <el-table-column prop="plevel" label="级别" />
          <el-table-column prop="department" label="部门" />
          <el-table-column prop="type" label="类型" />
          <el-table-column prop="duration" label="持续时间" />
          <el-table-column prop="records" label="记录" />
          <el-table-column prop="par" label="参与者" />
          <el-table-column prop="leader" label="负责人" />
          <el-table-column prop="account" label="账号" />
          <el-table-column prop="certifice" label="证书" />
          <el-table-column prop="report" label="报告" />
          <el-table-column prop="rdate" label="报告日期" />
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <el-button type="primary" @click="update(row)">
                <i class="el-icon-edit"></i> 修改
              </el-button>
              <el-button type="danger" @click="del(row)">
                <i class="el-icon-delete"></i> 删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          v-model:page-size="data.pageSize"
          v-model:current-page="data.pageNum"
          @current-change="handelCurrentChange"
          background
          layout="prev, pager, next"
          :total="data.total"
        />
      </div>

      <!-- 编辑对话框 -->
      <el-dialog width="35%" v-model="data.formVisible" title="项目信息" destroy-on-close>
        <el-form :model="data.form" :rules="rules" ref="formRef" label-width="100px" label-position="right">
          <el-form-item prop="pnumber" label="项目编号">
            <el-input v-model="data.form.pnumber" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="pid" label="项目ID">
            <el-input v-model="data.form.pid" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="plevel" label="级别">
            <el-input v-model="data.form.plevel" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="amount" label="金额">
            <el-input v-model="data.form.amount" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="department" label="部门">
            <el-input v-model="data.form.department" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="type" label="类型">
            <el-input v-model="data.form.type" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="records" label="记录">
            <el-input v-model="data.form.records" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="par" label="参与者">
            <el-input v-model="data.form.par" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="leader" label="负责人">
            <el-input v-model="data.form.leader" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="account" label="账号">
            <el-input v-model="data.form.account" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="certifice" label="证书">
            <el-input v-model="data.form.certifice" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="report" label="报告">
            <el-input v-model="data.form.report" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="data.formVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">保 存</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>

  <script>
  import {reactive, ref} from "vue";
  import { Search } from '@element-plus/icons-vue'
  import request from "@/utils/request";
  import {ElMessage, ElMessageBox} from "element-plus";

  const user = JSON.parse(localStorage.getItem('student-user')||'{}')

  const data = reactive({
    pnumber: "",
    pid: "",
    total: 0,
    tableData: [],
    pageNum: 1, // 当前页数
    pageSize: 5, // 每一页的个数
    student: JSON.parse(localStorage.getItem('student-user')||'{}'),
    formVisible: false,
    form: {}
  })

  const load = () => {
    if(data.rdate != null){
      const time = new Date(data.rdate);
      const Y = time.getFullYear();
      const M = (time.getMonth() + 1).toString().padStart(2, '0');
      const D = time.getDate().toString().padStart(2, '0');
      data.rdate = `${Y}-${M}-${D}`;
    }
    request.get("/zongxiang/selectPageZ", {
      params: {
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        pnumber: data.pnumber,
        pid: data.pid,
        rdates: data.rdate,
      }
    }).then(res => {
      data.tableData = res.data?.list || []
      data.total = res.data.total || 0
    })
  }

  // 调用方法获取数据
  load();

  const handelCurrentChange = () => {
    // 翻页后重新加载数据页面
    load()
  }



  const handeladd = () => {
    data.form = {}
    data.formVisible = true
  }

  const update = (row) => {
    request.get('/zongxiang/detailZ/' + row.id).then(res => {
      if (res.code === '200') {
        data.form = {...res.data }
        data.formVisible = true
      } else {
        ElMessage.error(res.msg)
      }
    })
  }

  const del = (row) => {
    ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      request.delete('/zongxiang/deleteZ/' + row.id).then(res => {
        if (res.code === '200') {
          ElMessage.success("操作成功")
          load()
        } else {
          ElMessage.error(res.msg)
        }
      })
    })
  }

  const formRef = ref()

  // 保存数据到后台
  const save = () => {
    formRef.value.validate((valid) => {
      if (valid) {
        request.request({
          url: data.form.id ? '/zongxiang/updateZ' : '/zongxiang/addZ',
          method: data.form.id ? 'PUT' : 'POST',
          data: data.form
        }).then(res => {
          if (res.code === '200') {
            load()
            data.formVisible = false // 弹窗关闭
            ElMessage.success("操作成功")
          } else {
            ElMessage.error(res.msg)
          }
        })
      }
    })
  }

  export default {
    components: {
      Search
    },
    setup() {
      return {
        data,
        user,
        searchIcon: Search,
        load,
        handelCurrentChange,
        handeladd,
        update,
        del,
        formRef,
        save
      }
    }
  }
  </script>

  <style scoped>
 .search-bar {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
  }

  .search-input {
    width: 280px;
    margin-right: 10px;
  }

  .action-buttons {
    margin-bottom: 18px;
  }

  .data-table {
    margin-bottom: 18px;
  }

  .pagination {
    margin-bottom: 18px;
  }
  .el-button--primary {
    --el-button-text-color: var(--el-color-white);
    --el-button-bg-color: #333;
    --el-button-border-color: var(--el-color-primary);
    --el-button-outline-color: var(--el-color-primary-light-5);
    --el-button-active-color: var(--el-color-primary-dark-2);
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-link-text-color: var(--el-color-primary-light-5);
    --el-button-hover-bg-color: var(--el-color-primary-light-3);
    --el-button-hover-border-color: var(--el-color-primary-light-3);
    --el-button-active-bg-color: var(--el-color-primary-dark-2);
    --el-button-active-border-color: var(--el-color-primary-dark-2);
    --el-button-disabled-text-color: var(--el-color-white);
    --el-button-disabled-bg-color: var(--el-color-primary-light-5);
    --el-button-disabled-border-color: var(--el-color-primary-light-5);
}
.el-pagination.is-background .btn-prev.is-active, .el-pagination.is-background .btn-next.is-active, .el-pagination.is-background .el-pager li.is-active {
    background-color: #333;
    color: var(--el-color-white);
}
.el-button--primary {
    --el-button-text-color: var(--el-color-white);
    --el-button-bg-color: #24527a;
    --el-button-border-color: var(--el-color-primary);
    --el-button-outline-color: var(--el-color-primary-light-5);
    --el-button-active-color: var(--el-color-primary-dark-2);
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-link-text-color: var(--el-color-primary-light-5);
    --el-button-hover-bg-color: var(--el-color-primary-light-3);
    --el-button-hover-border-color: var(--el-color-primary-light-3);
    --el-button-active-bg-color: var(--el-color-primary-dark-2);
    --el-button-active-border-color: var(--el-color-primary-dark-2);
    --el-button-disabled-text-color: var(--el-color-white);
    --el-button-disabled-bg-color: var(--el-color-primary-light-5);
    --el-button-disabled-border-color: var(--el-color-primary-light-5);
}
.el-button--primary {
    --el-button-text-color: var(--el-color-white);
    --el-button-bg-color: #24527a;
    --el-button-border-color: #214360;
    --el-button-outline-color: #e7f6f3;
    --el-button-active-color: var(--el-color-primary-dark-2);
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-link-text-color: #e7f6f3;
    --el-button-hover-bg-color: #f9b44c;
    --el-button-hover-border-color: #88d4c1;
    --el-button-active-bg-color: #e7f6f3;
    --el-button-active-border-color: #f9b44c;
    --el-button-disabled-text-color: var(--el-color-white);
    --el-button-disabled-bg-color: #f9b44c;
    --el-button-disabled-border-color: #f9b44c;
}
::-webkit-validation-bubble-arrow-clipper[data-v-cf8a8c64] .el-pagination.is-background .el-pager li.is-active {
    background-color: #24527a;
    color: var(--el-color-white);
}
  </style>
